<script setup lang="ts" name="SystemRole">
import { getPageList, deleteByIds } from '@/api/device/controlGateway'
import { Search, Refresh, Edit, Delete, Plus } from "@element-plus/icons-vue"
import type { FormInstance } from 'element-plus'
import { notify } from '@/utils/element'

// 编辑ref
const editRef = ref();

/** 状态的类型 */
const statusOptions = reactive<Options[]>([
  {
    label: '开',
    value: '0'
  },
  {
    label: '关',
    value: '1'
  },
])

const onlineStatusOptions = reactive<Options[]>([
  {
    label: '在线',
    value: '0'
  },
  {
    label: '离线',
    value: '1'
  },
])

// 定义状态
const state = reactive({
  loading: false,
  page: {
    current: 1, // 当前页码
    size: 10, // 每页显示多少条
    total: 0, // 总记录数
  } as PageType,
  query: {
    devCode: '', // 设备编号
    devname: '', // 设备名称
    status: '', // 使用状态
    onlineStatus: '', // 在线状态 
  } as DevControlGatewayQuery,
  tableList: [] as DevControlGatewayManage[],
});

const { loading, page, query, tableList } = { ...toRefs(state) };

onMounted(() => {
  queryData();
});

/**
 * 查询列表数据
 */
async function queryData() {
  try {
    state.loading = true;
    // 调用接口
    // const { current, size } = state.page;
    const { data } = await getPageList(state.query, state.page);
    console.log('data', data); // {total: xx, records: []}
    state.tableList = []; // 清空
    nextTick(() => {
      // 总记录数
      state.page.total = data.total;
      // 列表数据
      state.tableList = data.records;
      console.log('state.tableList', state.tableList);

    });
  } catch (error) {
  } finally {
    state.loading = false;
  }
}

// 点击查询
function handleQuery() {
  // 将页码设置为第1页
  state.page.current = 1;
  queryData();
}

/** 
 * 重置查询 
 */
const queryFormRef = ref<FormInstance>()
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 点击新增
function handleAdd() {
  // console.log('handleAdd');
  editRef.value.open('add', '新增');
}

// 点击删除
const deleteIds = ref<string[]>()
async function handleDelete() {
  console.log('handleDelete', deleteIds);
  try {
    state.loading = true;
    await deleteByIds({ queryParams: deleteIds });
    notify('删除成功！', { type: 'success' });
    queryData();
  } catch (error) {
  } finally {
    state.loading = false;
  }
}

// 点击修改
function handleEdit(row: SysRoleType) {
  // console.log('handleEdit', row);
  editRef.value.open('edit', '修改', row);
}

</script>

<template>
  <div class="page-nav">
    <div class="tab-header">
      <div class="tab-header-search">
        <el-form inline :model="query">
          <el-form-item label="设备编号">
            <el-input v-model="query.devCode" maxlength="30" placeholder="请输入设备编号" clearable />
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input v-model="query.devname" maxlength="30" placeholder="请输入设备名称" clearable />
          </el-form-item>
          <el-form-item label="使用状态">
            <el-select-v2 v-model="query.status" clearable filterable :options="statusOptions" style="width: 150px;" />
          </el-form-item>
          <el-form-item label="在线状态">
            <el-select-v2 v-model="query.onlineStatus" clearable filterable :options="onlineStatusOptions"
              style="width: 150px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain :icon="Search" @click="handleQuery()">查 询</el-button>
            <el-button type="primary" plain :icon="Refresh" @click="resetForm(queryFormRef)">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tab-header-btn">
        <el-button type="primary" plain @click="handleAdd" :icon="Plus">新增</el-button>
        <el-button type="danger" plain @click="handleDelete" :icon="Delete">删除</el-button>
      </div>
    </div>
    <div class="tab-page-container">
      <el-table class="table-con" ref="tableListRef" v-loading="loading" :data="tableList" border stripe
        :header-cell-style="{ backgroundColor: '#f7f7f7' }">
        <el-table-column align="center" type="selection" label="网关编号" />
        <el-table-column align="center" prop="id" label="ID" width="70" />
        <el-table-column align="center" prop="devCode" label="设备编号" />
        <el-table-column align="center" prop="devname" label="设备名称" />
        <el-table-column align="center" prop="sysNum" label="系统数量" width="70" />
        <el-table-column align="center" prop="devNum" label="内机数量" width="70" />
        <el-table-column align="center" prop="status" label="使用状态" width="100">
          <template #default="{ row }">
            <el-switch v-model="row.status" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              disabled inline-prompt active-text="开" inactive-text="关" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="onlineStatus" label="在线状态" width="100">
          <template #default="{ row }">
            <el-switch v-model="row.onlineStatus" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              disabled inline-prompt active-text="在线" inactive-text="离线" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="ip" label="IP" />
        <el-table-column align="center" prop="devType" label="设备型号" />
        <el-table-column align="center" prop="position" label="安装位置" />
        <el-table-column align="center" label="控制操作" width="120">
          <template #default="{ row }">
            <el-button @click.stop="handleEdit(row)" :icon="Edit" type="warning" link>设置</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <Pagination :page="page" @pageChange="queryData"></Pagination>

    <!-- 新增、修改组件 -->
    <ControlGatewayEdit ref="editRef" @refresh="queryData"></ControlGatewayEdit>
  </div>

</template>

<style scoped land="scss">
.tab-header-search {
  :deep(.el-form-item) {
    margin-bottom: 0px !important;
  }
}
</style>